import React, { useEffect, useState } from 'react'
import { Card } from 'antd'
import { Column } from '@ant-design/plots'
import styles from '@/views/overview/index.module.scss'

// import styles from '@/views/overview/index.module.scss'

interface propsData {
  data: any;
}

const RehearsalBox: React.FC<propsData> = ({ data }) => {
  const dataOrigin = Array.isArray(data) && data.length ? data : [
    { year: '2022年', value: 10, category: '学习' },
    { year: '2023年', value: 20, category: '学习' },
    { year: '2024年', value: 25, category: '学习' },
    { year: '2022年', value: 5, category: '培训' },
    { year: '2023年', value: 15, category: '培训' },
    { year: '2024年', value: 20, category: '培训' },
    { year: '2022年', value: 8, category: '考试' },
    { year: '2023年', value: 18, category: '考试' },
    { year: '2024年', value: 22, category: '考试' },
  ]
  const [showData , setShowData] = useState(null)
  const config = {
    data: dataOrigin,
    xField: 'year',
    yField: 'value',
    colorField: 'category',
    seriesField: 'category',
    legend: {
      color: {
        layout: {
          justifyContent: 'center',
          alignItems: 'center',
        },
        position: 'top',
      }
    }
  };
  useEffect(() =>{
    const dataOrigin = Array.isArray(data) && data.length ? data : [
      { key: 1, year: '2022年', value: 10, category: '学习' },
      { key: 2, year: '2023年', value: 20, category: '学习' },
      { key: 3, year: '2024年', value: 25, category: '学习' },
      { key: 4, year: '2022年', value: 5, category: '培训' },
      { key: 5, year: '2023年', value: 15, category: '培训' },
      { key: 6, year: '2024年', value: 20, category: '培训' },
      { key: 7, year: '2022年', value: 8, category: '考试' },
      { key: 8, year: '2023年', value: 18, category: '考试' },
      { key: 9, year: '2024年', value: 22, category: '考试' },
    ]
    const lsObj = {}
    dataOrigin.forEach((item) => {
      if (lsObj[item.category]) {
        lsObj[item.category] += item.value
      } else {
        lsObj[item.category] = item.value
      }
    })
    const lsArray = []
    for (const lsObjKey in lsObj) {
      const value = lsObj[lsObjKey]
      lsArray.push(<span key={lsObjKey}>{lsObjKey}自学：{value}次</span>)
    }
    setShowData(lsArray)
  }, [])
  return (
    <Card className={styles['train-box']} title="园区企业消防安全培训">
      <div className={styles['box-content']}>
        <div className={styles['right-text']}>
          {showData}
          <div style={{ marginTop: '30px' }}>查看详情</div>
        </div>
        <Column height={200} {...config} insetTop={30} />
      </div>
    </Card>
  )
}

export default RehearsalBox
